
<template>
    <div class="LoginMain">
        <!-- 头部返回和标题 -->
        <header>
            <van-nav-bar title="" left-text="返回" :border="false" left-arrow >
                <template #left>
                    <van-icon name="arrow-left" @click="$router.push('/home')" color="black" size="20" />
                </template>
                <template #title>
                    <h3>嗨购登录注册</h3>
                </template>
            </van-nav-bar>
        </header>
        <!-- 登录注册的from表单 -->
        <section>
            <div class="fromLogin">
                <!-- 第一种登录方式使用验证码方式登录 -->
                <div class="TelLogin" v-if="flag">
                    <p class="line">
                        <router-link :to="{ name: 'country', params: {back: 'login'} }" v-show="flag">+{{ pho }}<van-icon name="arrow-down" /></router-link>
                        <input type="text" name="" id="" v-model="tel" class="tel" placeholder="请输入手机号">
                    </p>
                    <p class="line">
                        <input type="text" class="verification" placeholder="请输入收到的验证码" maxlength="6">
                        <input type="button" value="获取验证码">
                    </p>
                </div>
                <!-- 第二种登录方式使用密码登录 -->
                <div class="PassLogin" v-else>
                    <p class="line">
                        <input type="text" name="" id="" v-model="tel" class="tel" placeholder="用户名/邮箱/手机号">
                    </p>
                    <p class="line">
                        <input type="text" class="verification" v-model="pass" placeholder="请输入密码">
                        <input type="button" class="checkColor" value="忘记密码">
                    </p>
                </div>
                <p @click="checkElse">
                    <van-button color="linear-gradient(90deg,#f10000,#ff2000 73%,#ff4f18)" :disabled="loginBut" :round="true" size="large" @click="login">
                    登录
                    </van-button>
                </p>
                <p><span @click="flag=!flag">账号密码登录</span><router-link to="/register">手机快速注册</router-link></p>
            </div>
            <van-divider :style="style">其他登录方式</van-divider>
        </section>
        <div class="elseLogin"></div>
        <!-- 底部使用其他方式登录 -->
        <footer>
            <div class="elseLogo">
                <a href="javascript:;" @click="checkElse"><img src="" alt=""/></a>
            </div>
            <div v-if="flag" class="protocol">
                <input type="checkbox" name="" id="" v-model="isflag">
                <p>若您输入的手机号未注册，将为您直接注册，注册即视为同意 <router-link to="1">京东用户注册协议</router-link>、<router-link to="1">用户隐私政策</router-link></p>
            </div>
            <div v-else class="protocol">
                <input type="checkbox" name="" id="" v-model="isflag">
                <p>登录即代表您已同意<router-link to="1">用户隐私政策</router-link></p>
            </div>
        </footer>
    </div>
</template>
<style lang="stylus" scoped>
footer
    padding 0 1.25rem
    .elseLogo
        width 100%
        display flex
        justify-content center
        align-items center
        margin .625rem 0 1.25rem
        img
            width 3.125rem
    .protocol
        display flex
        justify-content: center
        align-items flex-start
        input
            margin-top .1875rem
        p
            font-size .875rem
            // padding-top 1rem
            padding-left .3125rem
            color #555
            text-align center
            a
                color rgb(114,114,226)
.LoginMain
    display flex
    flex-direction column
    height 100%
    header
        width 100%
    section
        display flex
        flex-direction column
        padding 1.25rem 1.25rem 0
    .fromLogin
        display flex
        flex-direction column
        .line
            border-bottom 1px solid rgb(239,239,239)
            margin-bottom: 1.875rem
            a
                min-width 3.125rem
                font-size 1rem
            .tel
                flex 1
        p
            height 3.125rem
            display flex
            justify-content space-between
            align-items center
            font-size .875rem
            a
                color black
                justify-content space-around
                align-items center
                display flex
            input
                border 0
                outline none
                background-color white
                height 1.875rem
                font-size .875rem
            input[type="button"]
                padding 0 1.25rem
                color #555
                border-left 1px solid rgb(239,239,239)
            input.checkColor
                color black
</style>
<script>
import Vue from 'vue'
import { getLogin } from '@/api/User.js'
import { NavBar, Divider, Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Divider)
Vue.use(Toast)
export default {
  data () {
    return {
      style: {
        fontSize: '12px',
        fontWeight: 600,
        color: 'rgb(204,204,204)',
        marginTop: '30px'
      },
      pho: 86,
      isflag: false,
      flag: false,
      tel: '',
      pass: '',
      userState: ''
    }
  },
  computed: {
    loginBut () {
      if (this.tel !== '' && this.pass !== '' && this.isflag) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    // 协议勾选状态判断
    checkElse () {
      if (!this.isflag) {
        Toast('请阅读并勾选协议')
      }
    },
    // 登录按钮事件
    login () {
      // 判断用户登录方式
      if (this.flag) {
        // 手机号 + 验证码 登录方式
        console.log('这里是验证码登录')
      } else {
        // 用户名 + 密码 登录方式
        getLogin({ loginname: this.tel, password: this.pass }).then((res) => {
          if (res.code === '200') {
            Toast('登录成功')
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('userid', res.data.userid)
            localStorage.setItem('userState', true)
            this.$store.commit('outLogin', { userState: true, token: res.data.token, userId: res.data.userid })
            this.$router.go(-1)
          } else {
            Toast('用户名或密码错误')
          }
        })
      }
    }
  },
  mounted () {
    // 重定向根据用户登录状态进行重定向
    this.pho = this.$route.params.phoid ? this.$route.params.phoid : 86
  }
}
</script>
